<template>
    <div>
        <div class="sky-screen ivu-mb-16">
            <row :gutter="24">
                <Col span="6">
                    <Select v-model="searchItem.select" placeholder="请选择岗位" @on-change="onSearchItem">
                        <Option v-for="(item, index) in postList" :key="'post'+ index" :value="item.id">{{item.name}}</Option>
                    </Select>
                </Col>
                <Col span="18">
                    <DatePicker v-model="searchItem.date" @on-change="onSearchItem" type="daterange" placeholder="回访日期"></DatePicker>
                </Col>
            </row>
        </div>
        <div class="sky-note">
            <Tag v-for="(tag, inum) in labelTags" :key="'tag' + inum" type="border" :color="colorArr[radomNum]">{{tag.callback_state}}({{tag.total}})</Tag>
        </div>
        <Timeline v-if="callbackData.length > 0" class="ivu-pt-16 main-height" style="min-height: 240px;">
            <TimelineItem v-for="(items, index) in callbackData" :key="'item'+index">
                <p class="time">{{items.current_callback_time_str}}</p>
                <p class="content">{{items.content}}</p>
                <p class="consultant">
                    <span class="c-inr-right" v-if="items.profession_name">{{items.profession_name}}</span>
                    <span class="c-inr-right" v-if="items.member_name">{{items.member_name}}</span>
                    <Badge status="processing" :text="items.callback_state" />
                    <span> &nbsp; </span>
                    <Badge status="success" color="orange" :text="items.callback_way" />
                </p>
            </TimelineItem>
        </Timeline>
        <div v-else class="ivu-pt-16" style="height: 260px;text-align: center">暂无回访信息</div>
        <FooterToolbar>
            <Button type="primary" class="v-mt-20" size="large" v-if="status" @click="handleSubmit">回访</Button>
        </FooterToolbar>
       <table-model ref="editModel" @close="closeEdit"/>
    </div>
</template>
<script>
    import { formatWithYear } from '@/utils/datetime';
    import { PatientCallback } from '@/api/patient';
    import tableModel from '@/components/visitModel/table-model'
    import { mapState } from 'vuex'
    export default {
        components: { tableModel },
        props: ['types', 'status', 'patientInfo'],
        computed: {
            ...mapState('admin/page', [
                'pagePatient'
            ])
        },
        data () {
            return {
                typels: [],
                tags: [],
                modal: false,
                loading: false,
                showUpdate: false,
                colorArr: ['primary', 'success', 'warning'],
                radomNum: Math.floor(Math.random() * 2),
                callbackData: [],
                labelTags: [],
                postList: [{ id: '00', name: '全部岗位' }],
                searchItem: {
                    date: [undefined, undefined],
                    select: '00'
                },
                patientData: {},
                tagIds: [],
                methodList: []
            }
        },
        methods: {
            getData (id, types, tags, methods, ids, data) {
                this.patientId = id || this.pagePatient.patientId;
                this.patientData = data;
                if (!this.patientData.id) {
                    this.patientData.id = this.pagePatient.patientId
                }
                this.typels = types;
                this.methodList = methods;
                this.tags = tags;
                this.tagIds = ids;
                this.patientCallback();
            },
            patientCallback () {
                const params = {
                    page: 0,
                    pageSize: 0,
                    patient_user_id: this.patientId,
                    start_time: this.searchItem.date[0] && this.formDate(this.searchItem.date[0]),
                    end_time: this.searchItem.date[1] && this.formDate(this.searchItem.date[1]),
                    profession_id: this.searchItem.select === '00' ? '' : this.searchItem.select
                }
                PatientCallback(params).then((res) => {
                    this.callbackData = res.list
                    this.labelTags = res.statistics_list
                    if (this.postList.length === 1) {
                        const postList = res.condition.permission_list
                        this.postList = this.postList.concat(postList);
                    }
                }).catch(() => {})
            },
            onSearchItem () {
                this.patientCallback();
            },
            formDate (date) {
                return formatWithYear(date, '-')
            },
            handleSubmit () {
                const type = this.pagePatient ? this.pagePatient.edit_type : ''
                this.$refs.editModel.handleShow(this.patientInfo, this.typels, this.tags, type)
            },
            closeEdit (val) {
                if (val) {
                    this.$emit('closeUpdate');
                }
            }
        },
        filters: {
            handleState (val = '') {
                let reVal = '';
                if (val) {
                    const value = parseInt(val, 10)
                    if (value === 1) {
                        reVal = '未接通';
                    } else if (value === 2) {
                        reVal = '微信拉黑';
                    } else if (value === 3) {
                        reVal = '正常回访';
                    } else if (value === 4) {
                        reVal = '已到院';
                    }
                }
                return reVal
            }
        }
    }
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr-right {
    margin-right: 10px;
}

.main-height {
    height: 400px;
    max-height: 400px;
    overflow-y: auto;
}
h4 span {
    margin-left: 5px;
}
.sky-screen {
    margin-top: 16px;
}

</style>
